<template>

  <!-- 直接进行复用就行-->
  <div class="cont">
    <el-container>
      <el-aside width="200px">

        <side-menu>
        </side-menu>
      </el-aside>
      <el-container>
        <!--  头部属性      -->
        <el-header>
          <strong>admin后台管理系统</strong>
          <div class="header-avatar">
            <el-avatar size="medium" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png">

            </el-avatar>
            <el-dropdown>
            <span class="el-dropdown-link">
              admin<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>个人中心</el-dropdown-item>
                <el-dropdown-item>退出</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <el-link href="" target="_blank">网站</el-link>
            <el-link href="https://blog.csdn.net/SpongeBob_shouse?type=blog" target="_blank">csdn</el-link>

          </div>
        </el-header>
        <el-main>

          <!-- 要是想要我们的子路由出现的话 我们就可以将添加一个router-view进去
          这样之后我们才能进行子路由的出现 不是给组件用的 这个是给我们的路由跳转使用的-->
          <router-view></router-view>

        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
  //引入外部组件需要进行声明我们的组件名称
  import sideMenu from "@/include/sideMenu";
  import head from "@/include/head";

  export default {
    components: {
      sideMenu,
      head
    }

  }
</script>
<style>
  .header-avatar {
    float: right;
    width: 210px;
    display: flex;
    /*内容会被撑开*/
    justify-content: space-around;
    align-items: center;

  }

  .el-menu-vertical-demo {
    height: 100%;
  }

  .cont {
    height: 100vh;
    padding: 0;
    margin: 0;
  }

  .el-container {
    height: 100%;
    margin: 0;
    padding: 0;
  }

  .el-header, .el-footer {
    background-color: #17B3A3;
    color: #333;
    text-align: center;
    line-height: 60px;
  }

  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    /*text-align: center;*/
    line-height: 200px;
  }

  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }

  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }

</style>`
